<template>
  <el-container v-show = "showProject">
    <!--头部-->
    <el-header class = "el-header">
      <TheHeader />
    </el-header>
    <!--主体-->
    <el-main class = "el-main">
      <el-row style = "width: 100%;">
        <!--侧边导航和主体-->
        <el-row style = "width: 100%;" v-if = "true">
          <el-col :span = "4" style = " overflow-x: hidden">
            <TheNavigator />
          </el-col>
          <el-col :span = "20" style = "height: 80vh">
            <router-view></router-view>
          </el-col>
        </el-row>
        <!--视频播放页面-->
        <el-row style = "width: 100%;" v-else>
          <el-col :span = "24" style = "height: 80vh">
            <router-view name = "VideoMvPlay"></router-view>
          </el-col>
        </el-row>
      </el-row>
    </el-main>
    <!--底部-->
    <el-footer v-if = "true" class = "el-footer">
      <TheFoot />
    </el-footer>
    <!--播放遮罩层-->
    <TheAudioMaskLayer />
    <!--登录页面-->
    <the-login />
    <!--播放列表-->
    <the-play-drawer />
  </el-container>
  <el-button @click = "store.commit('UserInterface/SWITCHPROJECT')" v-show = "!showProject">显示</el-button>

</template>

<script setup>
import TheHeader from "@/components/TheHeader";
import TheNavigator from "@/components/TheNavigator";
import TheFoot from "@/components/TheFoot";
import TheAudioMaskLayer from "@/components/TheAudioMaskLayer";
import TheLogin from "@/components/TheLogin";
import ThePlayDrawer from "@/components/ThePlayDrawer";
import {computed} from "vue";
import store from "@/store";

let showProject = computed((() => store.state.UserInterface.showProject))
</script>


